<template>
  <div class="keyboard-container" :style="{ top: `${top}px`, width: `${w}px` }">
    <div class="keyboard flex gc-8">
      <div class="left flex-1">
        <ul>
          <li
            v-for="item in keyMap"
            :key="item.value"
            :class="[`a-${item.area}`]"
            class="keyboard-item flex flex-s"
            @click="handleClick(item.value)"
          >
            <template v-if="item.value === 'x'">
              <img :src="deletePng" width="24" />
            </template>
            <template v-else>
              {{ item.value }}
            </template>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useEventBus } from '@vueuse/core';
  import { keyMap } from './data';
  import deletePng from '../../../assets/delete.png';

  const bus = useEventBus('keyboard');
  const top = ref(window.innerHeight - 168);

  const w = ref(window.innerWidth);

  const handleClick = (value: string) => {
    bus.emit('click', value);
  };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
